<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style/商城.css">
    <style>

    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <ul>
            <li>
                <input type="checkbox" id="all"><label for="#all">全选</label>
            </li>
            <li class="head-list02">商品</li>
            <li>单价(元)</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </header>

    <div class="container">


        <!-- 第一个旗舰店 -->
        <div class="container01">
            <input type="checkbox" id="container01-check"><label for="#container01-check">某某旗舰店</label>
            <ul class="container01-list">
                <li>

                    <!-- 某旗舰店的商品列表 -->
                    <ul class="product-list">
                        <li>
                            <input type="checkbox" id="product-check">
                        </li>
                        <li class="product-cont">
                            <div><img src="./img/商品图.jpg" alt=""></div>
                            <p>荣耀Play4T 全网通6GB+128GB大内存 蓝水翡翠 4000mAh大电池 4800万AI摄影</p>
                        </li>
                        <li>￥500.00</li>
                        <li class="number-list">
                            <textarea id="number">1</textarea>
                            <div>
                                <button class="add">+</button>
                                <button class="sub">-</button>
                            </div>
                        </li>
                        <li class="price">￥0.00
                            <p>税费￥0.00</p>
                        </li>

                        <li>
                            <p>删除</p>
                            <p>收藏</p>
                        </li>
                    </ul>
                </li>
                <li>

                    <ul class="product-list">
                        <li>
                            <input type="checkbox" id="product-check">
                        </li>
                        <li class="product-cont">
                            <div><img src="./img/商品图.jpg" alt=""></div>
                            <p>荣耀Play4T 全网通6GB+128GB大内存 蓝水翡翠 4000mAh大电池 4800万AI摄影</p>
                        </li>
                        <li>￥500.00</li>
                        <li class="number-list">
                            <textarea id="number">1</textarea>
                            <div>
                                <button class="add">+</button>
                                <button class="sub">-</button>
                            </div>
                        </li>
                        <li class="price">￥0.00
                            <p>税费￥0.00</p>
                        </li>

                        <li>
                            <p>删除</p>
                            <p>收藏</p>
                        </li>
                    </ul>
                </li>


            </ul>
        </div>

        <!-- 第二个旗舰店 -->
        <div class="container01">
            <input type="checkbox" id="container01-check"><label for="#container01-check">某某旗舰店</label>
            <ul class="container01-list">
                <li>

                    <!-- 某旗舰店的商品列表 -->
                    <ul class="product-list">
                        <li>
                            <input type="checkbox" id="product-check">
                        </li>
                        <li class="product-cont">
                            <div><img src="./img/商品图.jpg" alt=""></div>
                            <p>荣耀Play4T 全网通6GB+128GB大内存 蓝水翡翠 4000mAh大电池 4800万AI摄影</p>
                        </li>
                        <li>￥500.00</li>
                        <li class="number-list">
                            <textarea id="number">1</textarea>
                            <div>
                                <button class="add">+</button>
                                <button class="sub">-</button>
                            </div>
                        </li>
                        <li class="price">￥0.00
                            <p>税费￥0.00</p>
                        </li>

                        <li>
                            <p>删除</p>
                            <p>收藏</p>
                        </li>
                    </ul>
                </li>
                <li>
                    <ul class="product-list">
                        <li>
                            <input type="checkbox" id="product-check">
                        </li>
                        <li class="product-cont">
                            <div><img src="./img/商品图.jpg" alt=""></div>
                            <p>荣耀Play4T 全网通6GB+128GB大内存 蓝水翡翠 4000mAh大电池 4800万AI摄影</p>
                        </li>
                        <li>￥500.00</li>
                        <li class="number-list">
                            <textarea id="number">1</textarea>
                            <div>
                                <button class="add">+</button>
                                <button class="sub">-</button>
                            </div>
                        </li>
                        <li class="price">￥0.00
                            <p>税费￥0.00</p>
                        </li>

                        <li>
                            <p>删除</p>
                            <p>收藏</p>
                        </li>
                    </ul>
                </li>


            </ul>
        </div>

    </div>
    <div class="sum">
        <h1>总计:<span>0元</span></h1>
    </div>
    <script src="./Jquery/jquery-3.6.0.min.js"></script>
    <script>
        // 入口函数
        $(function () {
            // 添加事件
            

            // 点击全选选中所有
            // $("#all").on("click", function () {
            //     var isChoose = $(this).prop("checked")

            //     if (isChoose) {
            //         $("#product-check").prop("checked", true)
            //         $("#container01-check").prop("checked", true)
            //     } else {
            //         $("#product-check").prop("checked", false)
            //         $("#container01-check").prop("checked", false)
            //     }
            // })


        })


    </script>
</body>

</html>